<template>
<view class='conponent-container'>
    <view v-for="(item, idx) in dropDwonSelectList" :key="idx" class="dropdown-select" @click="toggleDropdown(idx)" :class="{ 'active' : idx === activeIndex }">
        <view class="dropdown-text">
            {{ item.title }}
        </view>
        <u-icon name="arrow-up" v-if="activeIndex === idx"></u-icon>
        <u-icon name="arrow-down" v-else></u-icon>
    </view>

    <view class="slect-item" v-if="activeIndex !== null">
        <view class="confirm-buttons">
            <view class="confirm-btn cancel" @click="cancelSelection">取消</view>
            <view class="confirm-btn confirm" @click="confirmSelection">确认</view>
        </view>
        <view class="options-container">
            <view 
                v-for="(option, optionIdx) in dropDwonSelectList[activeIndex].options" 
                :key="optionIdx"
                class="option-item"
                :class="{ 'selected': isOptionSelected(activeIndex, option.value) }"
                @click="toggleOptionSelection(activeIndex, option)"
            >
                {{ option.label }}
            </view>
        </view>
    </view>
</view>
</template>

<script>
export default {
    props: {
        dropDwonSelectList: {
            type: Array,
            default: () => [
                {
                    title:'',
                    selectValue:[],
                    options:[
                        { label: '', value: '' },
                    ]
                },
            ]
        }
    },
    data() {
        return {
            activeIndex: null,  //选中的item的idx
            tempSelection: {}   //临时存储选中的值
        }
    },
    methods: {
        //处理点击下拉框的事件
        toggleDropdown(index) {
            if (this.activeIndex === index) {
                this.activeIndex = null;
            } else {
                this.activeIndex = index;
                this.tempSelection = {
                    ...this.tempSelection,
                    [index]: [...(this.dropDwonSelectList[index].selectValue || [])]
                };
            }
        },
        //处理选中option的事件
        toggleOptionSelection(dropdownIndex, option) {
            const currentSelections = this.tempSelection[dropdownIndex] || [];
            const optionIndex = currentSelections.indexOf(option.value);
            
            if (optionIndex === -1) {
                this.tempSelection = {
                    ...this.tempSelection,
                    [dropdownIndex]: [...currentSelections, option.value]
                };
            } else {
                this.tempSelection = {
                    ...this.tempSelection,
                    [dropdownIndex]: [
                        ...currentSelections.slice(0, optionIndex),
                        ...currentSelections.slice(optionIndex + 1)
                    ]
                };
            }
        },

        //判断是否选中，动态赋予样式
        isOptionSelected(dropdownIndex, optionValue) {
            if (!this.tempSelection[dropdownIndex]) return false;
            return this.tempSelection[dropdownIndex].includes(optionValue);
        },

        //取消事件
        cancelSelection() {
            this.activeIndex = null;
        },
        //确认事件
        confirmSelection() {
            if (this.activeIndex !== null && this.tempSelection[this.activeIndex] !== undefined) {
                // 更新selectValue为选中的value数组
                this.$set(this.dropDwonSelectList[this.activeIndex], 'selectValue', [...this.tempSelection[this.activeIndex]]);
                
                // 获取对应的中文label数组
                const selectedLabels = this.dropDwonSelectList[this.activeIndex].options
                    .filter(option => this.tempSelection[this.activeIndex].includes(option.value))
                    .map(option => option.label);
                
                console.log('选中的值:', {
                    dropdownIndex: this.activeIndex,
                    title: this.dropDwonSelectList[this.activeIndex].title,
                    selectedValues: this.tempSelection[this.activeIndex],
                    selectedLabels: selectedLabels
                });
                
                this.$emit('selection-changed', {
                    dropdownIndex: this.activeIndex,
                    title: this.dropDwonSelectList[this.activeIndex].title,
                    selectedValues: this.tempSelection[this.activeIndex],
                    selectedLabels: selectedLabels
                });
                
                this.activeIndex = null;
            }
        }
    }
}
</script>

<style lang='scss' scoped>
/* 样式保持不变 */
.conponent-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 20rpx 0;
}
.dropdown-select {
    display: flex;
    align-items: center;
}
.active {
    color: #1890ff;
}
.dropdown-text {
    margin-right: 16rpx;
}
.slect-item {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 22rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 8rpx;
}
.options-container {
    padding: 20rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;
}
.option-item {
    padding: 8rpx 24rpx;
    background: #f5f5f5;
    border-radius: 28rpx;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    transition: all 0.2s;
    
    &:hover {
        background: #e8f4fd;
    }
    
    &.selected {
        background: #e8f4fd;
        border: 1px solid #1890ff;
        color: #1890ff;
    }
}
.confirm-buttons {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 20rpx 0;
    gap: 16rpx;
}
.confirm-btn {
    padding: 16rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 28rpx;
    
    &.cancel {
        color: #666;
    }
    
    &.confirm {
        color: #1890ff;
    }
}
</style>